<template>
<div class="content">
	<!-- 条件筛选 -->
	<div class="filter">
		<div class="half" @click="toggleFilter(1)">{{timeTitle}}&nbsp;&nbsp;<i class="iconfont" :class="{'icon-xsj':!dateChoose,'icon-ssj':dateChoose}"></i></div>
		<div class="half" @click="toggleFilter(2)">{{projectTypeTitle}}&nbsp;&nbsp;<i class="iconfont" :class="{'icon-xsj':!typeChoose,'icon-ssj':typeChoose}"></i></div>
	</div>
	<div class="choose" @click="hideFilter()" v-if="dateChoose">
		<div class="item" @click.stop.prevent="function(){}">
			<div class="title">付款时间</div>
			<div class="time-grid">
				<div class="time-cell" :class="{'cell-selected':timeType == 0 && !defineTime}" @click.stop.prevent="changeTime(0,'当天')">当天</div>
				<div class="time-cell" :class="{'cell-selected':timeType == 6 && !defineTime}" @click.stop.prevent="changeTime(6,'7天')">7天</div>
				<div class="time-cell" :class="{'cell-selected':timeType == 29 && !defineTime}" @click.stop.prevent="changeTime(29,'1个月')">1个月</div>
				<div class="time-cell mr" :class="{'cell-selected':timeType == 89 && !defineTime}" @click.stop.prevent="changeTime(89,'3个月')">3个月</div>
				<div class="time-cell" :class="{'cell-selected':timeType == 179 && !defineTime}" @click.stop.prevent="changeTime(179,'6个月')">6个月</div>
				<div class="time-cell" :class="{'cell-selected':timeType == 364 && !defineTime}" @click.stop.prevent="changeTime(364,'1年')">1年</div>
				<div class="time-cell custome-cell" :class="{'cell-selected':defineTime}" @click.stop.prevent="changeTime(666,'自定义时间')">自定义时间</div>
			</div>
			<div v-if="defineTime">
				<div class="half-title" style="padding-left:.4rem;">开始时间</div>
				<div class="half-title" style="padding-left:.21rem;">结束时间</div>
				<div class="time-grid">
					<div class="time-cell custome-cell">
						<datetime v-model="start_date"></datetime>
					</div>
					<div class="time-cell custome-cell">
						<datetime v-model="end_date"></datetime>
					</div>
				</div>
				<div class="certain" @click.stop.prevent="makeSureTime()">确&nbsp;定</div>
			</div>
		</div>
	</div>
	<div class="choose" @click="hideFilter()" v-if="typeChoose">
		<div class="item" @click.stop.prevent="function(){}">
			<div class="title">类型</div>
			<div class="time-grid">
				<div class="time-cell" :class="{'cell-selected':project.id == projectId}" v-for="project in project_type" @click="chooseProject(project.id,project.name)">{{project.name}}</div>
			</div>
		</div>
	</div>
	<!-- 条件筛选END -->
	<!-- 财务概览 -->
	<div class="financial-overview">
		<div class="common-title">概况<span class="unit">（元）</span></div>
		<div class="collection">
			<div class="cell green">
				<div class="num">
					<countup :start-val="0" :end-val="receivable_amt" :decimals="2" :duration="2"></countup>
				</div>
				<div class="desc">实收金额</div>
			</div>
			<div class="cell blue">
				<div class="num">
					<countup :start-val="0" :end-val="refund_amt" :decimals="2" :duration="2"></countup>
				</div>
				<div class="desc">退费</div>
			</div>
			<div class="cell orange">
				<div class="num">
					<countup :start-val="0" :end-val="profit" :decimals="2" :duration="2"></countup>
				</div>
				<div class="desc">利润</div>
			</div>
		</div>
	</div>
	<!-- 财务概览END -->
	<!-- 收费记录 -->
	<div class="charge-record">
		<div class="common-title">销售详情</div>
		<div class="table" v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="10">
			<div class="cell" v-for="item in list" v-if="project_type.length > 0">
				<div class="detail">
					<div class="item">{{item.item_name}}&nbsp;x{{item.count}}{{item.sale_unit}}&nbsp;&nbsp;<span class="desc">{{item.item_type | projectDic}}</span></div>
					<div class="date">{{item.charge_date}}</div>
				</div>
				<div class="sum" :class="{'earn':item.receivable_amt >= 0,'pay':item.receivable_amt < 0}">
					<span v-if="item.receivable_amt >= 0">+</span>
					{{item.receivable_amt}}
				</div>
			</div>
		</div>
	</div>
	<!-- 收费记录END -->
</div>
</template>

<script>
import { Datetime,Countup } from 'vux'
import APIURL from '@/apiurl'
import Vue from 'vue'

export default {
	components:{
		Datetime,Countup
	},
	data() {
		return {
			timeTitle:"当天",
			timeType:0,
			projectTypeTitle:"项目类型",
			dateChoose:false,
			typeChoose:false,
			defineTime:false,// 选择自定义时间
			sureDefine:false,// 确定自定义时间
			start_date: new Date().Format("yyyy-MM-dd"),
			end_date: new Date().Format("yyyy-MM-dd"),
			receivable_amt:0,
			refund_amt:0,
			profit:0,
			project_type:[],
			projectId:0,
			page:0,// 页码
			entry_count:10,// 每页条目数
			list:[],
			intervalId:"",
			item_name:""// 药品名称
		}
	},
	methods: {
		makeSureTime() {
			this.toggleFilter(1);
			this.sureDefine = true;
			this.timeTitle = "自定义时间";
			this.resetPage();
		},
		changeTime(timeType,timeTitle) {
			if (timeType != 666) {
				var nowDate = new Date();
				this.start_date = new Date(nowDate - timeType * 24*3600*1000).Format("yyyy-MM-dd");
				this.timeType = timeType;
				this.timeTitle = timeTitle;
				this.toggleFilter(1);
				this.defineTime = false;
				this.sureDefine = false;
				this.resetPage();
			} else {
				this.defineTime = true;
			}
		},
		chooseProject(projectId,projectName) {
			this.projectId = projectId;
			if ( projectId == 0 ) {
				this.projectTypeTitle = "项目类型"
			} else {
				this.projectTypeTitle = projectName;
			}
			this.toggleFilter(2);
			this.resetPage();
		},
		toggleFilter(type) {
			switch(type) {
				case 1:
					this.typeChoose = false;
					this.dateChoose = !this.dateChoose;
					if (this.dateChoose) {
						if (!this.sureDefine) {
							this.defineTime = false;
						}
					}
					break;
				case 2:
					this.dateChoose = false;
					this.typeChoose = !this.typeChoose;
					break;
			}
		},
		hideFilter() {
			this.dateChoose = false;
			this.typeChoose = false;
		},
		loadMore() {
			if (this.busy) {
				return;
			}
			this.querySaleRecord();
		},
		resetPage() {
			this.page = 0;
			this.list = [];
			this.busy = false;
			this.querySale();
			this.querySaleRecord();
		},
		querySale() {
			var self = this;
			var requestBody = {
				token: userToken,
				start_date:self.start_date,
				end_date:self.end_date,
				hospital_id:hospital_id
			}
			if (self.projectId != 0) {
				requestBody.type_id = self.projectId;
			}
			if (self.item_name != "") {
				requestBody.item_name = self.item_name;
			}
			self.post(APIURL.SALE_DETAIL, requestBody, function(data){
				self.receivable_amt = data.receivable_amt;
				self.refund_amt = data.refund_amt;
				self.profit = data.profit;
			});
		},
		querySaleRecord() {
			var self = this;
			this.busy = true;
			var requestBody = {
				token: userToken,
				start_date:self.start_date,
				end_date:self.end_date,
				page:self.page,
				entry_count:self.entry_count,
				hospital_id:hospital_id
			};
			if (self.projectId != 0) {
				requestBody.type_id = self.projectId;
			}
			if (self.item_name != "") {
				requestBody.item_name = self.item_name;
			}
			self.post(APIURL.SALE_DETAIL_RECORD, requestBody, function(data){
				if (self.page == 0) {
					self.list = data.list;
				} else {
					self.list = self.list.concat(data.list);
				}
				if (data.list.length == self.entry_count) {
					// 判断是否需要继续加载
					self.busy = false;
				} else {
					self.busy = true;
				}
				self.page += 1;
			});
		},
		setItemName(itemName) {
			this.item_name = itemName;
			this.resetPage();
		},
		query() {
			var self = this;
			var requestBody = {
				token : userToken,
			}
			self.post(APIURL.CATEGORY, requestBody, function(data){
				self.project_type = data.statistics.sale.project_type;
				Vue.filter('projectDic',function(id){
					for (var i=0;i<self.project_type.length;i++) {
						var project = self.project_type[i];
						if (id == project.id ) {
							return project.name;
						}
					}
					return "";
				});
				self.querySaleRecord();
			})
			self.querySale();
		}
	},
	mounted() {
		initTokenNative();
		// 暴露 设置药品名称 给window 让原生调用
		window.setItemName = this.setItemName;
		setTitleNative("销售明细");
		showSearchBtnNative();
		var self = this;
		// 定时器判断原生有无赋值诊所信息给H5
		this.intervalId = window.setInterval(function(){
			if (userToken != undefined && hospital_id != undefined) {
				self.query();
				if (self.intervalId != "") {
					window.clearInterval(self.intervalId);
				}
			}
		},100);
	}
}
</script>